<include file="../Public/_header.html" />

<link type="text/css" href="/Public/Js/jquery-ui/jquery.ui.all.css" rel="stylesheet" />   
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.core.js"></script>  
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.mouse.js"></script> 
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.draggable.js"></script> 

<script type="text/javascript" src="/Public/Js/icolor/js/jquery.icolor.min.js"></script> 
<script type="text/javascript" src="/Admin/Tpl/default/SmsTemplet/adminsmsediter.js"></script> 
<link href="/Admin/Tpl/default/SmsTemplet/adminlayout.css" rel="stylesheet" type="text/css"  />
<script type="text/javascript" src="__PUBLIC__/Js/jquery.form.js"></script>
<link href="__PUBLIC__/Js/setavatar/css/imgareaselect-default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__PUBLIC__/Js/setavatar/jquery.imgareaselect.min.js"></script>
<php>
/**
*	调用图片生成工具thumb.php的封装方法．
**/
function _getSmsPhoto($photopath,$w,$h) {
	return "/thumb.php?w=".$w."&h=".$h."&url=http://".$_SERVER['HTTP_HOST'].$photopath;
}
/** 查询彩信模板分类信息 **/
$smst_dict 	= service('Dict')->getAllDictByCode('smstemplet');
$smsing_X = 240;
$smsing_Y = 152;
$smsing_Ratio = "8:5";
$_smsEditer_default_selectpic = "/Public/Js/smsEditer/img/alert.jpg";
</php>
<script type="text/javascript">
function sms_getThumbBaseUrl(w,h,imgpath,rand){
		//rand为了避免加载缓存而设置的随机数
		_imgurl = "<php>echo ''.$_SERVER['HTTP_HOST'].getAttachUrl('');</php>"+imgpath;
		if(rand==null)_baseurl = "/thumb.php?w="+w+"&h="+h+"&url=http://";
		else _baseurl = "/thumb.php?w="+w+"&h="+h+"&rand="+rand+"&url=http://";
		return _baseurl+_imgurl;
}
var _smst_relbaseurl = "{:getAttachUrl('')}";
var _smst_geturl = "{:U('Admin://SmsTemplet/getJsonSmsTemplet')}";//查询ｓｍｓ模板路陉
var _smsEditer_default_alertpic = "/Public/Js/smsEditer/img/alert.jpg";

</script> 
<style type="text/css">
			.icolor{position:absolute;}
			.icolor_flat,.icolor_ft{position:relative;}
			.icolor td{width: 15px;height: 15px;border: solid 1px #000000;	cursor:pointer;}
			.icolor table{background-color: #FFFFFF;border: solid 1px #ccc;}
			.icolor .icolor_tbx{width:170px;border-top:1px solid #999;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
			.icolor_ok img{border:none;}
			
			.icolorC,h2{width:500px;margin:80px auto;}
			#icolor3 .icolor_tbx{width:154px;padding-right:16px;}
			#icolor3 .icolor_ok{position:absolute;left:154px;top:50%;margin-top:-8px;}
</style>


<div class="so_main">
  		<div class="page_tit">管理彩信模板</div>

  <div class="form2">
  	
  	
<div class="sms_edit_panel" style="width: 1000px;">
  		<div class="panel-title">
         <ul class="column-tab">
            <li class="tab-title tab-title-current" rel='edit'>模板预览</li>
            <li class="tab-title tab-title-partition" rel='partition'>&nbsp;</li>
            <li class="tab-title tab-title-current" rel='all'
            		onclick="sms_getSmsTemplet('all');">全部</li>
            <volist id="vo" name="smst_dict">
            	<li class="tab-title" rel='{$vo['code']}' 
            			onclick="sms_getSmsTemplet('{$vo['code']}');">{$vo['desc']}</li>
         		</volist>
            <li class="tab-title" rel='upload'
            		onclick="sms_settitlestyle('upload');">上传编辑</li>
         </ul>
      </div>
					 	
			<div class="left_area">
					
					<div id='show_sms_bg'>
						<div class="left hide" id="sms_photo_big4edit"
							style="width: {$smsing_X}px; height: {$smsing_Y}px; 
							border:1px solid #B4B5AF;overflow: hidden;">
							<img id="photo_big" src="/Public/Js/smsEditer/img/alert.jpg" />
						</div>
						<textarea id="inputtext" style="background-image: url('{$_smsEditer_default_selectpic}');">
		        </textarea>
		        <img id="sms_draggable_icon" src='' class='hide' style="left: 2px;position: relative;top: -152px;margin:2px">
    			</div>
    			<div style="border-left: 1px solid #CCCCCC;border-right: 1px solid #CCCCCC;border-bottom: 1px solid #CCCCCC;">
						<img src="/Public/Js/smsEditer/img/txm_demo.jpg" height="100" width="240px">
    			</div>
    			
    			<div class="opt_area">
		    		<div>
				      	操作：
				      	<img 	src="/Public/Js/smsEditer/img/icon-color.gif" id="icolor4" 
				      				title="设置字体颜色！">
				      				
				      	<img 	src="/Public/Js/smsEditer/img/icon-expression.gif" id="sms_show_iconarea" rel='0'
				      				onclick="//$(element).offset().left
															 $('#sms_icon_area').css('left',$(this).offset().left-1);
															 $('#sms_icon_area').css('top' ,$(this).offset().top+16);
															 //$(element).offset(.top
				      								 if($(this).attr('rel')==0){
				      								 		$('#sms_icon_area').removeClass('hide');
				      								 		$(this).attr('rel','1');
				      								 }else{
				      								 		$('#sms_icon_area').addClass('hide');
				      								 		$(this).attr('rel','0');
				      								 }
				      								"
				      				title="添加表情！">
				      				
				      	<img 	src="/Public/Js/smsEditer/img/icon-upload.gif" 
				      				onclick="sms_createSmsBackGround()" 
				      				title="将所选图标与背景融合！生成新背景！">
				      				
				      	<img 	src="/Public/Js/smsEditer/img/icon-preview.gif" 
				      				onclick="submitPrivew();"
				      				title="预览结果！">
				    </div>
				    	<input type="button" class="btn_b" onclick="addTemplet()" value="修改" /> 
						<input type="button" class="btn_b" value="删除"	onclick="doDelete()" />
						<script>
						function doDelete(){
						        //aid = aid ? aid : getChecked();
						       // aid = aid.toString();
						        imgpath = $('#smsimg').val();
						        //alert(imgpath);
						        if(imgpath == '') return false;
										if(!confirm('确定删除么？')){
												return;
										}
						        //提交删除
						        $.post("{:U('/SmsTemplet/doDelete')}", {imgpath:imgpath}, function(res){
							        if(res == '1') {
							        	goPage(1);
							            ui.success('删除成功');
							        }else {
							        	ui.success('删除失败');
							        }
						        });
						}
						</script>
		     	</div>
		     	<include file="../Public/Js/smsEditer/icon.html" />
		     	
			</div>
			
    	<div class="right_area" style="width: 685px;">
    			<div id='list_sms_thumbs'>
    				<div id="thumbs"  style="height: 272px;">
							<ul class="thumbs" id='sms_thumb_item_ul'>
								
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
								
								<li class="unselected hide">
										<img src="" rel=''>
								</li>
							</ul>
						</div>
						<div class="clear"></div>
	    			<div >
		    			<div id='sms_thumbs_nav'  class="page_box" 
		    						style="height: 24px;line-height: 23px;padding-bottom: 10px;
		    									padding-right: 10px;padding-top: 10px;float: right;text-align: center;">
		    			</div>
	    			</div>
    			</div>
    			
    			<div id='sms_upload_area' class='hide'>
    						<!-- 上传彩信图片ｓｔａｒｔ -->
    						
    						<div style="display: block; margin-top: -20px;" class="setItemsInfo">
		            	<div style="margin:0px 15px;">
											<div style="padding:10px 0;color:#666;"> 
												<form style="width:280px;float: left;" enctype="multipart/form-data" method="post" id="uploadpic" name="upform" dotype="ajax" callback="uploadpic" target="upload_target" 
															action="{:U('Admin://SmsTemplet/smsimg',array('t'=>'upload'))}">
														上传：<input type="file" name="Filedata" onchange="douploadpic()" id="Filedata"/> 
													<span style="display:none;" id="loading_gif"><img src="__PUBLIC__/Js/avatar/loading.gif" align="absmiddle" />上传中，请稍侯......</span>  
												</form>
												<form style="width: 100%;float: right;margin:10px 0px;" 
													 method="post" 
													id='upform' name="upform" 
													action="{:U('Admin://SmsTemplet/smsimg',array('t'=>'save'))}">
													名称：<input name="title" id='title' type="text" value="{$smst.title}">
      										&nbsp;&nbsp;&nbsp;&nbsp;
													分类：<input id="sortdesc" type="text" value="{$smst['sort_id']|getCategoryName}" 
									      					onclick="ui.box.load(
									    											'{:U('Index://Public/showtree',array('code'=>'smstemplet'))}'
									    											,{ title:'查看彩信模板分类' })"
									      					readonly>
													      	<input id="sort_id" name="sort_id" type="hidden" value="{$smst['sort_id']}">
																<script>
																		function _tmp_setselectdict(rel,txt){
																    		$('#sortdesc').val(txt);
																    		$('#sort_id').val(rel);
																    }
																</script>

													<input type="hidden" name="picurl">
													<input type="hidden" name="x1">
													<input type="hidden" name="y1">
													<input type="hidden" name="x2">
													<input type="hidden" name="y2">
													<input type="hidden" name="w">
													<input type="hidden" name="h">
													<input type="button" class="btn_b" onclick="addTemplet()" value="确定" /> 
													<input type="button" class="btn_w" value="取消" 
													onclick="unSetSmsimg()" />
												</form>
											</div>
											<div class="clear"></div> 
				              <div class="picSettings">
				                <div id="photo" class="left" style="width:100%; height:320px;">
												</div>
												
                			</div>
                	</div>
								</div><!-- 上传彩信图片ｅｎｄ -->
    			</div>
    	</div>

    	<div class="clear"></div>
		
     	<form action="{:U('Admin://SmsTemplet/preview')}" method='post' id='privewform' target="_blank">
     			<input type='hidden' name='smsimg' id='smsimg'>
     			<input type='hidden' name='smstext' id='smstext'>
     			<input type='hidden' name='xyOffset' id='xyOffset'>
     			<input type='hidden' name='textcolor' id='textcolor'>
     			<input type='hidden' name='smsicon' id='smsicon'>
     			<input type='hidden' name='ispreview' id='ispreview' value='yes'>
     	</form>
	</div>
	
	
  </div>
</div>
	
<script type="text/javascript">
		var hs = document.location.hash;
		var up_pic_width ={$smsing_X};
		var up_pic_height ={$smsing_Y};
		
		_tmp_initForm('uploadpic');
		//_tmp_initForm('upform');
		
	//});
	
	
	function _tmp_initForm(formid){
		//监听 form 表单提交
	  	$("#"+formid).bind('submit', function() {
						var callbackfun = $(this).attr('callback');
						var type   = $(this).attr('type');
						var options = {
						    success: function(txt) {
						    	//alert(txt);
						    	//txt = eval("("+txt+")");
									if(callbackfun){
										callback(eval(callbackfun),txt);
									}else{
										  if(txt.boolen){
											  ui.success( txt.msg );
										  }else{
											  ui.error( txt.msg );
										  }
										  	 
									}
						    }
						};		
	          $(this).ajaxSubmit(options);
			 			return false;
	    });
	}
	
	function addTemplet(){
	  	if($('#sort_id').val()==''){
	  			k_error('请选择分类!');
		  		return;
		  }
		  if($('#title').val()==''){
	  			k_error('请输入名称！');
		  		return;
		  }
		  //alert($('#upform').attr('action'));
			$.post($('#upform').attr('action'), $('#upform').serialize()
									, function(txt){ 
											//alert(txt);
							    		obj = eval("("+txt+")");
											if(obj.status==1){
												ui.success( obj.msg );
												dosaveface(txt);
											}else{
												ui.error( obj.msg ); 
											}
						    });
	}
	
	function callback(fun,argum){
		fun(argum);
	}
	
	/**裁剪完的图片上传后返回结果的处理函数**/
	function dosaveface(txt){
		//alert(txt);
		txt = eval('('+txt+')');
		if (txt.status==1) {
			k_success('更新成功');
			sms_getSmsTemplet($('#sort_id').val(),1);
			unSetSmsimg();
			$('#inputtext').css('background', "url('"+sms_getThumbBaseUrl(240,152,txt.smsimg_path)+"')"); 
			$('#smsimg').val(txt.smsimg_path);
		}else {
			k_error('更新失败');
		}
	}
	
	/**上传要裁减的图片**/
	function douploadpic(){
			//alert('111');
			$('#loading_gif').show();
			$('input[name="Filedata"]').hide();
			var options = {
						error:function(txt){
								//alert('error:'+txt);
						},
				    success: function(txt) {
				    	//alert('success:'+txt);
							uploadpic(txt);
				    }
			};		
			$('#uploadpic').ajaxSubmit(options);
		  return false;		
	}
	
	var imgrs;
	/**上传裁减的图片成功后，进行的初始化函数。设置页面让用户进行图片裁减。**/
	function uploadpic(txt){
		//alert(txt);
		txt = eval('('+txt+')');
		if(txt.code==1){
			var tmpDate = new Date(); 
			set_UP_W_H(txt.data['picwidth'],txt.data['picheight']);
			var defautlv = ( txt.data['picwidth'] > txt.data['picheight']) ?txt.data['picheight']:txt.data['picwidth'];
	//		$("#photo").attr('src',txt.data['picurl']+'?t='+ tmpDate.getTime());
			$("#photo").html("<img id='photo_img' src="+txt.data['picurl']+'?t='+ tmpDate.getTime()+">");
			$("input[name=picurl]").attr('value',txt.data['picurl']);
		 	$("#photo_big").attr('src',txt.data['picurl']+'?t='+ tmpDate.getTime());
		
		 	imgrs = $('#photo_img').imgAreaSelect({ 
						x1: 0, 
						y1: 0,
					  x2: {$smsing_X}, 
						y2: {$smsing_Y}, 
						handles: true,
						onInit:preview,
						onSelectChange:preview,
						onSelectEnd:onSelectEnd,
						//aspectRatio: '1:1',
						aspectRatio: '{$smsing_Ratio}',
						instance: true,
						parent:$('#photo')
						});
			$('#loading_gif').hide();
		 }else{
		 	alert(txt.message);
		 }
	}
	
	//重新上传图片
	function unSetSmsimg(){
		var defaultpic = _smsEditer_default_alertpic;
		$('input[name="Filedata"]').show();
		$("#photo").html("");
		$("input[name=picurl]").attr('value','');
	 	$("#photo_big").attr('src',defaultpic);
	 	$('#photo_big').attr('style','position: relative;');
	 	imgrs.setOptions({ remove:true });
	 	imgrs.update();
	};	
	
	function set_UP_W_H(w,h){
		up_pic_width = w;
		up_pic_height = h;
	}	
		
	function onSelectEnd(img,selection){
	    $('input[name=x1]').val(selection.x1);
	    $('input[name=y1]').val(selection.y1);
	    $('input[name=x2]').val(selection.x2);
	    $('input[name=y2]').val(selection.y2); 
	    $('input[name=w]').val(selection.width); 
	    $('input[name=h]').val(selection.height); 
	}
		
	function preview(img, selection) {
			onSelectEnd(img,selection);
			var big_scaleX = {$smsing_X} / (selection.width || 1);
	    var big_scaleY = {$smsing_Y} / (selection.height || 1);
		
	    $('#photo_big').css({
	        width: Math.round(big_scaleX * up_pic_width) + 'px',
	        height: Math.round(big_scaleY * up_pic_height) + 'px',
	        marginLeft: '-' + Math.round(big_scaleX * selection.x1) + 'px',
	        marginTop: '-' + Math.round(big_scaleY * selection.y1) + 'px'
	    });
	}		
	
</script>



<style>
.sms_edit_panel{
	background-color: #FFFFFF;
	border: 1px solid #C4C2C2;
	padding:0px;
	width: 1000px;
}
.sms_edit_panel .left_area{
	float:left;width:242px;background-color: #FFFFFF;
	margin-left: 24px;
  padding: 30px 10px 10px 10px;
}
.sms_edit_panel .left_area #show_sms_bg{
	height:154px;width:242px;
}
.sms_edit_panel .left_area textarea{
	border: 1px solid #CCCCCC;color: #333333;font-size: 10pt;height:142px;width:230px;
	padding:5px;line-height: 20px;
	overflow-y:hidden;overflow-x:hidden;
	/**BACKGROUND-IMAGE: url(/demo/smsbg/N_013[1].jpg);**/
}
.sms_edit_panel .right_area{
	width : 432px;
	height: 600px;
	float:right;
	background-color: #FFFFFF;
	border-left: 1px solid #EAEAEA; 
	padding: 20px 0px 10px 0px;
}
.sms_edit_panel .opt_area{
	float:left;background-color: #FFFFFF;text-align:center;width:100%;
	padding:20px 0px 10px 0px;
}
.sms_edit_panel .opt_area img{
	margin:0px 15px;
}
.sms_edit_panel .panel-title {
	height: 28px;
	line-height: 28px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	background: -moz-linear-gradient(-90deg, #FFFFFF, #DDDDDD) repeat scroll 0 0 transparent;
}
				
.sms_edit_panel .panel-title ul.column-tab > li:first-child {
	border-left: medium none;
	margin-left: 0;
}
				
.sms_edit_panel .panel-title .column-tab .tab-title-current {
	background-color: #FFFFFF;
}

.sms_edit_panel .panel-title .column-tab .tab-title-partition {
	width: 225px;
}
		
.sms_edit_panel .panel-title ul.column-tab > li {
	border-left: 1px solid #C4C2C2;
	border-right: 1px solid #C4C2C2;
	float: left;
	margin-left: -1px;
}
	
.sms_edit_panel .panel-title .column-tab .tab-title {
	cursor: pointer;
	font-weight: bold;
	text-align: center;
	padding: 0 10px;
}
				
.sms_edit_panel ul.thumbs {
	clear: both;
	margin: 0;
	padding: 0;
}
.sms_edit_panel ul.thumbs li {
	float: left;
	list-style: none outside none;
	margin: 5px 16px;
	padding: 0;
}
.sms_edit_panel .thumbs img{
	border: 1px solid #CCCCCC;
	display: block;
	padding: 2px;
}
.sms_edit_panel ul.thumbs li.selected {
	/**background: none repeat scroll 0 0 #000000;**/
	opacity: 1;
}
.sms_edit_panel ul.thumbs li.unselected {
	background: none repeat scroll 0 0 #ffffff;
	opacity: 0.67;
}
.sms_edit_panel .sms_input {    
	color: #333333;
	font-size: 10pt;
  height: 40px;
	/**line-height: 18px;**/
	padding: 10px;
  width: 240px;	
}
.sms_edit_panel .hide{
	display: none;
}

.sms_edit_panel #sms_icon_area{
	position: absolute;
	border: 1px solid #CCCCCC;
}

.sms_edit_panel #sms_icon_area table {
    background-color: #FFFFFF;
}

.sms_edit_panel #sms_icon_area table td {
    border: 1px solid #DBDBDB;
    cursor: pointer;
    height: 25px;
    width: 25px;
}

.sms_edit_panel #sms_icon_area table td img{
    margin: 0 0px;
    height: 25px;
    width: 25px;
}

</style>


<include file="../Public/_footer.html" />